<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>canvas里的图片跨域怎么处理</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
</body>
<script>
  "use strict"; {
    /* 
      跨域canvas的问题
        1.图片服务器需要配置Access-Control-Allow-Origin 的值为 *
        2.canvas图片getImageData cross-origin跨域问题
          对于跨域的图片，只要能够在网页中正常显示出来，就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步，通过getImageData()方法获取图片的完整的像素信息，则多半会出错。
        https://www.zhangxinxu.com/wordpress/2018/02/crossorigin-canvas-getimagedata-cors/
    */
    let canvas = document.createElement("canvas")
    let ctx = canvas.getContext("2d")
    let img = new Image()
    img.crossOrigin = ''
    /* 
      anonymous	元素的跨域资源请求不需要凭证标志设置。
      use-credentials	元素的跨域资源请求需要凭证标志设置，意味着该请求需要提供凭证。 
    */
    img.addEventListener("load", function () {
      ctx.drawImage(this, 0, 0)
      let i = ctx.getImageData(0, 0, this.width, this.height)
      console.log(i.data)
    })
    img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4'
    document.documentElement.append(canvas)
  };
</script>

</html>